<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         table{
            border-collapse: collapse;
        }
        td{
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border:1px solid #000;
            font-size: 20px;
        }

        .change{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            position: fixed;
            top:0;
            left: 0;
        }

        .change>div{
            width: 300px;
            height: 300px;
            padding: 30px 15px;
            background: #fff;

        }
    </style>
</head>
<body>
    <div class="add">
        姓名: <input type="text" name="name"><br>
        联系电话:<input type="text"name="ph"><br>
        学历: <input type="text" name="ed"><br>
        年龄: <input type="text" name="age"><br>
        期望薪资: <input type="text" name="wage"><br>
        <button>保存</button>
        <button>取消</button>
    </div>

    <hr>


    <table>
        <thead>
         <tr>
            <td>姓名</td>
            <td>联系电话</td>
            <td>学历</td>
            <td>年龄</td>
            <td>期望薪资</td>
            <td>删除</td>
            <td>修改</td>
         </tr>
        </thead>
        <tbody></tbody>
    </table>

    <div class="change">
        <div>
            姓名: <input type="text" name="name"><br>
            联系电话:<input type="text"name="ph"><br>
            学历: <input type="text" name="ed"><br>
            年龄: <input type="text" name="age"><br>
            期望薪资: <input type="text" name="wage"><br>
            <button>保存</button>
            <button>取消</button>
        </div>
    </div>


    <script>
        const arr = [
            {name:'张三',ph:13701364087,ed:'大学辍学',age:40,wage:2000000,},
            {name:'李四',ph:23813819123,ed:'哈弗博士',age:47,wage:2020000,},
            {name:'张三',ph:13497746622,ed:'大学辍学',age:45,wage:2500000,},
        ];

        const oTbody = document.querySelector('tbody');

        // 获取 新增相关 标签对象
        const oAdd = document.querySelector('.add');
        // 确定按钮
        const oBtnEnsure = oAdd.querySelectorAll('button')[0];
        // 取消按钮
        const oBtnCancel = oAdd.querySelectorAll('button')[1];
        // 姓名
        const oIptName = oAdd.querySelector('[name="name"]');
        //联系电话
        const oIptPh= oAdd.querySelector('[name="ph"]');
        //学历
        const oIptEd = oAdd.querySelector('[name="ed"]');
        // 年龄
        const oIptAge = oAdd.querySelector('[name="age"]');
        // 期望薪资
        const oIptWage = oAdd.querySelector('[name="wage"]');


         // 获取 修改相关 标签对象
         const oChange = document.querySelector('.change');
        // 确定按钮
        const oBtnEnsureChange = oChange.querySelectorAll('button')[0];
        // 取消按钮
        const oBtnCancelChange = oChange.querySelectorAll('button')[1];
        // 姓名
        const oIptNameChange = oChange.querySelector('[name="name"]');
        //联系电话
        const oIptPhChange = oChange.querySelector('[name="ph"]');
        //学历
        const oIptEdChange = oChange.querySelector('[name="ed"]');
        // 年龄
        const oIptAgeChange = oChange.querySelector('[name="age"]');
        // 期望薪资
        const oIptWageChange = oChange.querySelectorAll('[name="wage"]');


        
  
        let index ;
        setPage();

        oBtnEnsure.addEventListener('click' , function(){
            if( window.confirm('您确定要添加吗?') ){
                // 获取数据 
                // 获取 姓名
                let name = oIptName.value ;
                //获取练习电话
                let ph = oIptPH.value - 0 ;
                //获取学历
                let ed = oIotEd.value ;
                // 获取 年龄
                let age = oIptAge.value - 0  ;
                //期望薪资
                let wage =oIptWage.value - 0 ;


            


            
                let id = arr[arr.length-1].id + 1 ;


                arr.push( {name: name, ph: ph , ed: ed , age:age , wage: wage } )

                console.log( arr );

        
                setPage();
            }
        } )

        oTbody.addEventListener('click' , function(e){

            if( e.target.getAttribute('name') === 'del' ){
                if( !window.confirm('您确定要删除吗?') ){
                    return ; 
                }
                arr.splice( Number(e.target.getAttribute('index')) , 1 ); 

                setPage();


            }else if( e.target.getAttribute('name') === 'change' ){

                oChange.style.display = 'flex' ;

                index = Number( e.target.getAttribute('index') ) ;
                
                oIptNameChange.value = arr[index].name;
                oIptPhChange.value = arr[index].ph;
                oIptEdChange.value = arr[index].ed;
                oIptAgeChange.value = arr[index].age;
                oIptWageChange.value = arr[index].wage;

               
            }
        })
  



        oBtnEnsureChange.addEventListener('click' , function(){

            if( window.confirm('您确定要修改吗?') ){
                let name = oIptNameChange.value ;
                let ph = oIptPhChange.value - 0 ;
                let ed = oIptEdChange.value ;
                let age = oIptAgeChange.value - 0  ;
                let wage = oIptWageChange.value -0  ;

                arr[index].name = name;
                arr[index].ph = ph;
                arr[index].ed =  ed;
                arr[index].age = age;
                arr[index].wage = wag;
                setPage();

                oChange.style.display = 'none';

            }
        })
        oBtnCancelChange.addEventListener('click' , function(){
            oChange.style.display = 'none';
        })
        
        function setPage(){
            if( arr.length === 0 ){
                oTbody.innerHTML = '<tr><td colspan="7">没有匹配数据</td></tr>' ;
                return ;
            }
            let str = '' ; 
            arr.forEach(function(item,key){
                str += `
                    <tr>
                        <td>${item.name}</td>
                        <td>${item.ph}</td>
                        <td>${item.ed}</td>
                        <td>${item.age}</td>
                        <td>${item.wage}</td>
                        <td><button name="del" index="${key}">删除</button></td>
                        <td><button name="change" index="${key}">修改</button></td>
                    </tr>
                `;
            })
            oTbody.innerHTML = str ;
        }

    </script>
</body>
</html>   
